<template>
    <div>
        <h2>房型列表</h2>
        <input type="button" value="添加" class="btn btn-success" @click="add">
       <div>
        <span>房型名称:</span>
        <input type="text"  v-model="model.TypeName">
        <input type="button" value="查询" class="btn btn-success"  @click="getList">
       </div>
          <table class="table">
            <tbody>
                <tr>
                    <td>房型名称</td>
                    <td>房型价格</td>
                    <td>房型面积</td>
                    <td>是否有窗</td>
                    <td>入住人数</td>
                    <td>图片</td>
                    <td>房间状态</td>
                    <td>操作</td>
                </tr>


                <tr v-for="item  in list" :key="item.Id">
                    <td>{{item.TypeName}}</td>
                    <td><span style="color: red;">￥</span>{{item.TypePrice}}</td>
                    <td>{{item.TypeArea}}</td>
                    <td>{{item.IsWindow?"是":"否"}}</td>
                    <td>{{item.Pepole}}人</td>
                    <td><img :src="item.Photo" width="100" height="100"></td>
                    <td>
                    <span v-if="item.TypeState == 1">空闲</span>
                    <span v-if="item.TypeState == 2">已预约</span>
                    <span v-if="item.TypeState == 3">已入住</span>
                    </td>
                    <td> 
                        <input type="button" value="删除" class="btn btn-danger"  @click="housedel(item.Id)">
                        <input type="button" value="编辑" class="btn btn-Infor"  @click="houseupd(item.Id)">
                    </td>
                </tr>
            </tbody>
          </table>
          
    </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { onMounted, ref, reactive } from 'vue';
import { useRouter ,useRoute} from 'vue-router';

const  router=useRouter();
const  route=useRoute();
//跳转
const add=()=>{
 router.push('/houseAdd')
}

const list:any=ref([]);

let model=reactive({

    TypeName:'',

})

onMounted(()=>{
getList();
})

let getList=()=>{
axios({
url:'/api/HouseType/HouseTypeList',
method:'get',
params:model,
})
.then((res)=>{
    console.log(res);
    list.value=res.data;
})
.catch((ree)=>{
    console.log(ree);
})

}

//删除
const housedel=(Id:any)=>{
var  f=(confirm('您确定要删除吗?'))
if(f){
axios({

url:'/api/HouseType/HouseTypeDel',
method:'delete',
params:{
    Id:Id,
}
})
.then((res)=>{
console.log(res);
if(res.data>0){
alert('删除成功');
getList();
return;
}
else{
    alert('删除失败');
    return;

}

})

.catch((ree)=>{
console.log(ree);
})

}
}


//修改 
const houseupd=(Id:any)=>{
router.push({
path:'/houseUpd',
query:{
    Id:Id,
}
})

}
</script>

<style scoped>

</style>